<template>
  <div class="video-tutorials-container">
  <!-- 视频播放模态框 -->
  <div v-if="showVideoPlayer" class="video-modal-overlay" id="video-overlay" @click="handleOverlayClick">
    <div class="video-modal">
      <div class="video-modal-header">
        <h3>{{ currentVideo?.title || '视频播放' }}</h3>
        <button class="close-modal" @click="closeVideoPlayer">&times;</button>
      </div>
      <div class="video-modal-content">
        <video id="main-video-player" controls class="modal-video-player"></video>
        <div v-if="videoLoading" class="video-loading">加载中...</div>
        <div v-if="videoError" class="video-error">{{ videoError }}</div>
      </div>
    </div>
  </div>
    <div class="video-header">
      <h2>羽毛球视频教学</h2>
      <div class="video-filters">
        <select v-model="selectedCategory" @change="filterVideos">
          <option value="all">全部教程</option>
          <option value="basics">基础教学</option>
          <option value="techniques">技术进阶</option>
          <option value="tactics">战术分析</option>
          <option value="fitness">体能训练</option>
        </select>
      </div>
    </div>

    <!-- 精选视频 -->
    <div class="featured-video" v-if="featuredVideo">
      <div class="video-player-container">
        <div class="video-placeholder">
          <img :src="featuredVideo.thumbnailUrl" :alt="featuredVideo.title" class="video-thumbnail">
          <div class="play-button" @click="openVideoPlayer(featuredVideo)"></div>
        </div>
      </div>
      <div class="featured-info">
        <h3>{{ featuredVideo.title }}</h3>
        <p class="video-meta">
          <span class="video-category">{{ getCategoryName(featuredVideo.category) }}</span>
          <span class="video-duration">{{ featuredVideo.duration }}</span>
          <span class="video-views">{{ featuredVideo.views }} 次观看</span>
        </p>
        <p class="video-description">{{ featuredVideo.description }}</p>
      </div>
    </div>

    <!-- 视频列表 -->
    <div class="videos-grid">
      <div class="video-card" v-for="video in filteredVideos" :key="video.id">
        <div class="video-card-thumbnail">
          <img :src="video.thumbnailUrl" :alt="video.title">
          <div class="video-duration-badge">{{ video.duration }}</div>
          <div class="play-icon" @click="openVideoPlayer(video)"></div>
        </div>
        <div class="video-card-info">
          <h4 class="video-card-title">{{ video.title }}</h4>
          <p class="video-card-meta">
            <span class="video-card-category">{{ getCategoryName(video.category) }}</span>
            <span class="video-card-views">{{ video.views }} 次观看</span>
          </p>
        </div>
      </div>
    </div>

    <div class="no-videos" v-if="filteredVideos.length === 0">
      暂无相关教学视频
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue';




// 视频播放功能实现
const showVideoPlayer = ref(false);
const currentVideo = ref(null);
const videoLoading = ref(false);
const videoError = ref(null);

// 打开视频播放器
const openVideoPlayer = (video) => {
  

  currentVideo.value = video;
  videoLoading.value = true;
  videoError.value = null;
  showVideoPlayer.value = true;

  // 等待DOM更新后加载视频
  nextTick(() => {
    const videoElement = document.getElementById('main-video-player');
    if (videoElement) {
      videoElement.src = video.videoUrl || video.thumbnailUrl.replace('/thumbnail/', '/video/');
      videoElement.load();
      videoElement.play().then(() => {
        videoLoading.value = false;
      }).catch(error => {
        console.error('视频播放失败:', error);
        videoError.value = '视频加载失败: ' + error.message;
        videoLoading.value = false;
      });
    }
  });
};

// 关闭视频播放器
const closeVideoPlayer = () => {
  const videoElement = document.getElementById('main-video-player');
  if (videoElement) {
    videoElement.pause();
    videoElement.src = '';
  }
  showVideoPlayer.value = false;
  currentVideo.value = null;
  videoLoading.value = false;
  videoError.value = null;
};

// 点击遮罩层关闭视频
const handleOverlayClick = (event) => {
  if (event.target === document.getElementById('video-overlay')) {
    closeVideoPlayer();
  }
}

// 状态管理
const selectedCategory = ref('all');

// 模拟视频数据
const videos = ref([
  {
    id: 4,
      title: '羽毛球基础教学：正确握拍姿势',
      videoUrl: 'https://upos-sz-mirrorhw.bilivideo.com/upgcxcode/78/05/105580578/105580578-1-192.mp4?e=ig8euxZM2rNcNbNg7wdVhwdlhbNMhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&trid=a87a30344e0743c6a49f14fa9c11787T&deadline=1750912402&nbs=1&gen=playurlv3&os=upos&oi=837394196&platform=html5&mid=3546678502099387&og=cos&upsig=9961a8f147c1c4db1e91821fdd9286b3&uparams=e,uipk,trid,deadline,nbs,gen,os,oi,platform,mid,og&bvc=vod&nettype=0&bw=1797211&buvid=&build=0&dl=0&f=T_0_0&mobi_app=&agrr=0&orderid=0,1',
    category: 'basics',
    duration: '08:45',
    views: 12500,
    description: '本视频详细讲解了羽毛球的正确握拍方法，包括正手和反手握拍技巧，适合初学者入门学习。',
    thumbnailUrl: 'https://static.butiao.com/images/2024/08/22/a12cc2b67fea69fe3c6f5e99c447df98.jpg',
  
    featured: true
  },
  {
    id: 7,
    title: '正手击球技巧全解析',
    category: 'techniques',
    duration: '12:30',
    views: 8750,
    description: '从基础站位到高级发力技巧，全面解析正手击球技术要点。',
    thumbnailUrl: 'https://static.butiao.com/images/2024/08/22/10df4b559cbfac14db98f91c8551b8b9.jpg',
    featured: false
  },
  {
    id: 8,
    title: '羽毛球双打战术与配合',
    category: 'tactics',
    duration: '15:20',
    views: 6320,
    description: '详解双打比赛中的基本站位、轮转和配合技巧，提升团队协作能力。',
    thumbnailUrl: 'https://static.butiao.com/images/2024/08/22/10df4b559cbfac14db98f91c8551b8b9.jpg',
    videoUrl: 'https://example.com/videos/doubles-tactics.mp4',
    featured: false
  },
  {
    id: 1,
    title: '羽毛球基础教学：正确握拍姿势',
    category: 'basics',
    duration: '08:45',
    views: 12500,
    description: '本视频详细讲解了羽毛球的正确握拍方法，包括正手和反手握拍技巧，适合初学者入门学习。掌握正确的握拍姿势是打好羽毛球的基础。',
    thumbnailUrl: 'https://p3-sign.toutiaoimg.com/pgc-image/797048efab39498b8a018aee83c36647~tplv-tt-origin-web:gif.jpeg?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1751529078&x-signature=QCZbyb0nZ56CjYqL1S%2F6SyikEVQ%3D',
    featured: true
  },
  {
    id: 2,
    title: '正手击球技巧与发力训练',
    category: 'techniques',
    duration: '12:30',
    views: 8750,
    description: '学习专业选手的正手击球技巧，掌握正确的发力方式和身体协调，提升击球力量和准确性。',
    thumbnailUrl: 'https://pics4.baidu.com/feed/b151f8198618367ab3d3a5b72ca238d9b21ce565.jpeg@f_auto?token=65d9eaa83ffb4c9cd574b7b54c27edbb',
    featured: false
  },
  {
    id: 3,
    title: '羽毛球双打战术：站位与配合',
    category: 'tactics',
    duration: '15:20',
    views: 6320,
    description: '详解双打比赛中的基本站位原则和搭档配合技巧，帮助你在双打中占据优势。',
    thumbnailUrl: 'https://images.unsplash.com/photo-1569473715693-962ae8174a4a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
    featured: false
  },
  {
    id: 4,
    title: '羽毛球专项体能训练计划',
    category: 'fitness',
    duration: '10:15',
    views: 4280,
    description: '专业教练设计的羽毛球专项体能训练，提升爆发力、速度和耐力，让你在场上更具竞争力。',
    thumbnailUrl: 'https://images.unsplash.com/photo-1574279606130-42730a85053f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
    featured: false
  },
  {
    id: 5,
    title: '反手击球技术全解析',
    category: 'techniques',
    duration: '11:45',
    views: 7950,
    description: '从基础到进阶的反手击球技术讲解，包括反手高远球、反手吊球和反手杀球技巧。',
    thumbnailUrl: 'https://images.unsplash.com/photo-1528543606781-2f6e6857f318?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
    featured: false
  },
  {
    id: 6,
    title: '羽毛球比赛中的心理战术',
    category: 'tactics',
    duration: '14:30',
    views: 3120,
    description: '学习如何在比赛中控制情绪、调整心态，以及如何通过心理战术打乱对手节奏。',
    thumbnailUrl: 'https://images.unsplash.com/photo-1518492104633-130d0cc84637?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
    featured: false
  }
]);

// 精选视频
const featuredVideo = computed(() => {
  return videos.value.find(video => video.featured) || videos.value[0];
});

// 筛选视频
const filteredVideos = computed(() => {
  if (selectedCategory.value === 'all') {
    return videos.value.filter(video => !video.featured);
  }
  return videos.value.filter(video => !video.featured && video.category === selectedCategory.value);
});

// 获取分类名称
const getCategoryName = (categoryValue) => {
  const categories = {
    'basics': '基础教学',
    'techniques': '技术进阶',
    'tactics': '战术分析',
    'fitness': '体能训练'
  };
  return categories[categoryValue] || '其他';
};

// 筛选视频
const filterVideos = () => {
  // 筛选逻辑已在computed属性中实现
};
</script>

<style scoped>
.video-tutorials-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.video-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

.video-header h2 {
  color: #2196F3;
  margin: 0;
}

.video-filters select {
  padding: 0.6rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
}

/* 精选视频 */
.featured-video {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
  background-color: #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.video-player-container {
  background-color: #000;
  position: relative;
  height: 350px;
}

.video-placeholder {
  width: 100%;
  height: 100%;
  position: relative;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background-color: rgba(33, 150, 243, 0.8);
  border-radius: 50%;
  cursor: pointer;
}

.play-button:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent white;
}

.featured-info {
  padding: 1.5rem;
}

.featured-info h3 {
  color: #333;
  margin-top: 0;
}

.video-meta {
  display: flex;
  gap: 1.5rem;
  color: #666;
  font-size: 0.9rem;
  margin: 1rem 0;
}

.video-category {
  background-color: #e3f2fd;
  color: #2196F3;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}

.video-description {
  color: #555;
  line-height: 1.6;
}

/* 视频列表 */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.video-card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.video-card-thumbnail {
  position: relative;
  height: 160px;
  background-color: #000;
}

.video-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.video-duration-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0,0,0,0.7);
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background-color: rgba(33, 150, 243, 0.8);
  border-radius: 50%;
}

.play-icon:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent white;
}

.video-card-info {
  padding: 1rem;
}

.video-card-title {
  color: #333;
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  line-height: 1.4;
  display: -webkit-box;
  display: box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  overflow: hidden;
}

.video-card-meta {
  display: flex;
  justify-content: space-between;
  color: #777;
  font-size: 0.8rem;
}

.video-card-category {
  background-color: #e8f5e9;
  color: #4CAF50;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

.no-videos {
  text-align: center;
  padding: 3rem;
  color: #777;
  background-color: #f9f9f9;
  border-radius: 12px;
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .featured-video {
    grid-template-columns: 1fr;
  }
  .video-player-container {
    height: 250px;
  }
}
/* 视频播放模态框样式 */
.video-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.video-modal {
  width: 90%;
  max-width: 1200px;
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.video-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid #eee;
}

.video-modal-header h3 {
  margin: 0;
  color: #333;
}

.close-modal {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  transition: color 0.2s;
}

.close-modal:hover {
  color: #ff4444;
}

.modal-video-player {
  width: 100%;
  height: auto;
  max-height: 70vh;
}

.video-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.2rem;
}

.video-error {
  color: #ff4444;
  text-align: center;
  padding: 2rem;
}

/* 视频加载动画 */
.video-loading::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .video-modal {
    width: 95%;
    max-width: none;
  }
}

</style>